<template>
  <page-detail>
    <div class="form-container">
      <!-- 表单内容 -->
      <van-form ref="form">
        <!-- 矛盾标题 -->
        <van-field
          v-model="formData.suggestionTitle"
          label="意见标题"
          placeholder="请输入"
          :rules="[{ required: true, message: '请输入意见标题' }]"
        />

        <van-field
          v-model="formData.itemName"
          label="意见类型"
          placeholder="请选择"
          readonly
          clickable
          right-icon="arrow-down"
          @click="showTypePicker = true"
          :rules="[{ required: true, message: '请选择意见类型' }]"
        />
        <van-field
          v-model="formData.personName"
          label="姓名"
          placeholder="请输入"
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-field
          v-model="formData.personPhone"
          label="联系方式"
          placeholder="请输入"
          :rules="[{ required: true, message: '请输入联系方式' }]"
        />
        <van-field
          v-model="formData.suggestionContent"
          label="意见内容"
          type="textarea"
          placeholder="请输入"
          autosize
        />
     
        <div class="upload-section">
          <div class="upload-title">附件图片</div>
          <ne-file-upload :max-file="3" v-model="formData.itemCoverUrls" />
        </div>
      </van-form>

      <!-- 类型选择器 -->
      <van-popup v-model="showTypePicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="typeList"
          @confirm="onTypeConfirm"
          @cancel="showTypePicker = false"
        />
      </van-popup>
    </div>
    <template #footer>
      <van-button round type="primary" style="width: 200px" @click="submit">
        立即发起
      </van-button>
    </template>
  </page-detail>
</template>

<script>
import { Dialog, Toast } from 'vant'
import { getDict } from '../../api/tbDict'
import NeFileUpload from '../../components/NeFileUpload.vue'
import { mapGetters } from 'vuex'
import { tbSuggestionSave } from '../../api/tbSuggestion'
export default {
  name: 'wx_pages_fzbz_disputeComplainSubmit',
  components: { NeFileUpload },
  data() {
    return {
      showTypePicker: false,
      formData: {
        suggestionTitle: '',
        suggestionType: '',
        suggestionContent: '',
        suggestionStatus: '',
        suggestionFeedback: '',
        suggestionPicUrl1: '',
        suggestionPicUrl2: '',
        suggestionPicUrl3: '',
        note: '',
        itemName: '',
      },
      typeList: [],
      // 上传的文件列表
      fileList: [],
      showTime: false,
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    // 类型选择确认
    onTypeConfirm(value) {
      this.formData.suggestionType = value.value
      this.formData.itemName = value.text
      this.showTypePicker = false
    },
    // 提交表单
    submit() {
      const _this = this
      const formData = {
        ...this.formData,
        userId: this.userInfo.userId,
        userName: this.userInfo.userName,
      }
      const [suggestionPicUrl1, suggestionPicUrl2, suggestionPicUrl3] =
        (formData.itemCoverUrls && formData.itemCoverUrls.map((i) => i.url)) ||
        []
      if (suggestionPicUrl1) {
        formData.suggestionPicUrl1 = suggestionPicUrl1
      }
      if (suggestionPicUrl2) {
        formData.suggestionPicUrl2 = suggestionPicUrl2
      }
      if (suggestionPicUrl3) {
        formData.suggestionPicUrl3 = suggestionPicUrl3
      }
      formData.suggestionStatus = '0'
      delete formData.itemCoverUrls
      _this.$refs.form.validate().then(() => {
        Dialog.confirm({
          title: '提示',
          message: '是否确认提交?',
        })
          .then(async () => {
            _this.$showLoading('提交中...')
            await tbSuggestionSave(formData)
            Toast.success({
              message: '提交成功',
              duration: 1500,
              onClose: () => {
                _this.$navigateBack()
              },
            })
            _this.$hideLoading()
          })
          .catch(() => {})
      })
    },
  },
  onLoad() {
    getDict('suggestion_type').then((res) => {
      this.typeList = res.data.map((item) => ({
        text: item.dictValue,
        value: item.dictKey,
      }))
    })
  },
}
</script>

<style lang="scss" scoped>
.form-container {
  padding: 20px 16px;
  min-height: 100vh;
  background-color: #f7f8fa;

  .upload-section {
    margin: 20px 0;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;

    .upload-title {
      font-size: 14px;
      color: #333;
      margin-bottom: 16px;
    }

    .upload-btn {
      width: 80px;
      height: 80px;
      background-color: #f7f8fa;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .upload-text {
        font-size: 12px;
        color: #969799;
        margin-top: 8px;
      }
    }
  }
}
</style>
